<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/assets/css/layui.css">
</head>
<style>
.password{
    position: relative;
}
.password .n-txtCss{
    width:90% !important;
}
.password .fa{
    position: absolute;
    right: 10px;
    top:15px;
    font-size: 20px;
    cursor: pointer;
}

</style>
<script type="text/javascript">

$(".password").on("click", ".fa-eye-slash", function () {
    $(this).removeClass("fa-eye-slash").addClass("fa-eye");
    $(this).prev().attr("type", "text");
});
 
$(".password").on("click", ".fa-eye", function () {
    $(this).removeClass("fa-eye").addClass("fa-eye-slash");
    $(this).prev().attr("type", "password");
});

</script>
<body>
<dd class="password">
    <input name="" type="password" class="n-txtCss" placeholder="请输入您的密码" datatype="*6-16" errormsg="密码范围在6~16位之间！" nullmsg="请输入密码！" sucmsg="&nbsp;" maxlength="16" plugin="passwordStrength">
    <i class="fa fa-eye-slash"></i>
</dd>
</body>
</html>